$(function() {
    showAccountInfo();
    
    initValidation();
    
    $('#btnEdit').click(function(){
        $('#tblAccountDetails').hide();    
        $('#tblAccountEdit').show();    
        $('#btnCancel').show();    
        $('#btnSave').show();    
        $(this).hide();
        
        // Assign data
        var user = $.cookies.get('user');
        $('[name="accUsername"]').val(user.username);    
        $('[name="accFirstName"]').val(user.firstName);    
        $('[name="accLastName"]').val(user.lastName);    
        $('[name="accGender"][value="'+ user.gender +'"]').attr('checked', true);    
        $('[name="accDOB"]').val(toVNDate(user.dob));    
        $('[name="accEmail"]').val(user.email);    
        $('[name="accAddress"]').val(user.address);
         
         return false;    
    });
    
    $('#btnCancel').click(function(){
        $('#tblAccountDetails').show();    
        $('#tblAccountEdit').hide();    
        $(this).hide();    
        $('#btnSave').hide();    
        $('#btnEdit').show();
        
        return false;    
    });

    $('#frmAccountEdit').submit(function(){
        if($(this).valid()) {
            var user = $.cookies.get('user');
            user.username = $('[name="accUsername"]').val();    
            user.firstName = $('[name="accFirstName"]').val();    
            user.lastName = $('[name="accLastName"]').val();    
            user.gender = $('[name="accGender"]:checked').val();    
            user.dob = toDBDate($('[name="accDOB"]').val());    
            user.email = $('[name="accEmail"]').val();    
            user.address = $('[name="accAddress"]').val();
            
            // Save
            $.cookies.set('user', JSON.stringify(user));
            $(this).submit();
        }    
    });
    
    $('[name="accDOB"]').datepicker({
        showOn: "button",
        buttonImage: "js/jQueryUI/images/calendar.gif",
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true
    });
});

function showAccountInfo() {
    if($.cookies.get('user') !== null) {
        var user = $.cookies.get('user');
        $('#accUsername').html(user.username);
        $('#accFirstName').html(user.firstName);
        $('#accLastName').html(user.lastName);
        $('#accGender').html(user.gender);
        $('#accDOB').html(toVNDate(user.dob));
        $('#accEmail').html(user.email);
        $('#accAddress').html(user.address);
    } else {
        $('#accountDetails').html('<span class="error">Unauthorized access. You must login to view your account details.</span>');
    }
}

function initValidation() {
    $('#frmAccountEdit').validate({
        rules: {
            'accUsername': {
                required: true,
                rangelength: [6, 50],
            },
            'accFirstName': {
                required: true,
                rangelength: [1, 20],
            },
            'accLastName': {
                required: true,
                rangelength: [2, 30],
            },
            'accDOB': {
                required: true,
                dateVN: true,
            },
            'accEmail': {
                required: true,
                email: true,
            },
        },
        messages: {
            'accUsername': {
                required: 'Username is required.',
                rangelength: 'Username length must be between 6 and 50.',
            },
            'accFirstName': {
                required: 'First Name is required.',
                rangelength: 'First Name length must be between 1 and 20.',
            },
            'accLastName': {
                required: 'Last Name is required.',
                rangelength: 'Last Name length must be between 2 and 30.',
            },
            'accDOB': {
                required: 'Date of Birth is required.',
                dateVN: 'Date of Birth invalid.',
            },
            'accEmail': {
                required: 'Email is required.',
                email: 'Email invalid.',
            },
        }
    });
}